<template>
    <div class="wrap">
        <div class="header">
            <a-space>
                <a-range-picker :value="formatDate(time)" :allowClear="false" @change="onDateChange" />
                <a-button type="default" class="defaultButton" @click="getInfo">
                    <Icons type="sync"></Icons>
                </a-button>
                <ExportBtn></ExportBtn>
            </a-space>
        </div>
        <div class="tabs">
            <a-tabs :activeKey="activeKey" @change="tabChange">
                <a-tab-pane :tab="item.label" v-for="item in tabData" :key="item.value">
                </a-tab-pane>
            </a-tabs>
        </div>
        <a-spin :spinning="loading">
            <template v-if="activeKey == tabData[0].value">
                <div class="wrap-content">
                    <div class="wrap-content-left">
                        <div class="wrap-content-left-title">隐患排查统计分析</div>
                        <div class="wrap-content-left-subTitle">{{ infoData[activeKey]['describe'] }}</div>
                        <div class="wrap-content-left-table">
                            <AnalyTable :dataList="infoData[activeKey]['problemAnalysis']" type="AnalysisLookColum"
                                :scroll="{ y: 'calc(100vh - 62px - 20px - 40px - 40px - 130px - 24px - 30px)' }">
                            </AnalyTable>
                        </div>
                    </div>
                    <div class="wrap-content-right">
                        <div class="wrap-content-right-title">热点问题TOP</div>
                        <div class="wrap-content-right-echart"
                            v-if="infoData[activeKey] && Array.isArray(infoData[activeKey]['problemAnalysisTop8']) && infoData[activeKey]['problemAnalysisTop8'].length > 0">
                            <ColumEcharts :data="infoData[activeKey]['problemAnalysisTop8'] || []">
                            </ColumEcharts>
                        </div>
                        <a-empty v-else style="width: 100%;margin-top:10%;"></a-empty>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="title" v-if="tabData.find(v => v.value == activeKey)">{{tabData.find(v => v.value == activeKey).label || ''}}</div>
                <div class="wrap-contentBar">
                    <!-- 柱状图 -->
                    <!-- <BarEcharts :data="infoData[activeKey]"></BarEcharts> -->
                    <!-- 饼图 -->
                    <ColumEchartsPie :data="infoData[activeKey]" :onCallBack="echartClick"
                        v-if="Array.isArray(infoData[activeKey]) && infoData[activeKey].length > 0"></ColumEchartsPie>
                    <a-empty v-else style="width: 100%;margin-top:10%;"></a-empty>
                </div>
            </template>
        </a-spin>
        <FireModalList :record="echartInfo" type="analyPie" :isVisible="isVisible" :onCallBack="changeVisible"
            v-if="['department'].includes(activeKey)"
            :otherData="{ 'startTime': `${time[0]}`, 'endTime': `${time[1]}`, }">
        </FireModalList>
        <AnTableBtn :isVisible="isVisible" :onCallBack="changeVisible" :record="echartInfo" v-else></AnTableBtn>

    </div>
</template>
<script>
import Icons from "../components/Icons.vue";
import moment from 'moment';
import { tabData } from './js/js.js';
import ColumEcharts from './components/ColumEcharts';
import BarEcharts from './components/ColumEchartsBar';
import AnalyTable from './components/AnalyTable';
import ColumEchartsPie from './components/ColumEchartsPie';
const AnTableBtn = () => import('./components/AnTableBtn')
import FireModalList from '../components/Fire/FireModalList.vue'
import ExportBtn from './components/ExportBtn';

export default {
    name: 'AnalysisLook',
    components: {
        Icons,
        ColumEcharts,
        BarEcharts,
        AnalyTable,
        ColumEchartsPie,
        AnTableBtn,
        FireModalList,
        ExportBtn,
    },
    data() {
        return {
            loading: false,
            time: [],
            infoData: {},
            tabData,
            activeKey: '',
            // 点击柱状图
            isVisible: false,
            echartInfo: {},
        }
    },
    methods: {
        getInfo() {
            let params = {
                startTime: this.time[0],
                endTime: this.time[1],
            };
            let nowActive = this.activeKey;
            let tabObj = tabData.find(v => v.value == this.activeKey);
            this.loading = true;
            this.postAxios(this[tabObj.url], params)
                .then((res) => {
                    if (res.code == 200) {
                        this.infoData[this.activeKey] = res.data;
                        if (this.activeKey == this.tabData[0].value) {
                            this.infoData[this.activeKey]['problemAnalysisTop8'] = this.infoData[this.activeKey]['problemAnalysisTop8'].map(v => {
                                return {
                                    ...v,
                                    label: v.name,
                                    value: v.num,
                                }
                            })
                        } else {
                            this.infoData[this.activeKey] = this.infoData[this.activeKey].map(v => {
                                return {
                                    ...v,
                                    label: v.name,
                                    value: v.num,
                                }
                            })
                        }
                    }
                })
                .catch(() => { })
                .finally(() => {
                    this.activeKey = nowActive;
                    this.loading = false;
                });
        },
        onDateChange(date, dateString) {
            this.time = dateString;
            this.getInfo();
        },
        formatDate(e) {
            let res = [];
            if (Array.isArray(e) && e.length > 0) {
                res[0] = moment(e[0], 'YYYY-MM-DD');
                res[1] = moment(e[1], 'YYYY-MM-DD');
            } else {
            }
            return res;
        },
        tabChange(e) {
            this.activeKey = e;
            this.getInfo();
        },
        // 图点击事件
        echartClick(e) {
            let item = e.data;
            if (item.openFlag != '0') {
                this.isVisible = true;
                this.echartInfo = item;
            }
        },
        changeVisible() {
            this.isVisible = false;
            this.echartInfo = {};
        }
    },
    mounted() {
        this.time = [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')];
        // {
        //     // 测试数据
        //     this.time = [moment('2024-10-05').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')];
        // }
        this.activeKey = this.tabData[0].value;
        this.tabData.filter((v) => {
            this.infoData = {
                ...this.infoData,
                [v.value]: v.default,
            }
        })
        this.getInfo();
    },
}
</script>
<style lang="less" scoped>
.wrap {
    width: 100%;
    height: 100%;
    background-color: #ffffff;

    .header {
        height: 40px;
        width: 100%;
        padding: 0px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--backColor);
    }

    .tabs {
        height: 46px;
        overflow-y: hidden;
        user-select: none;

        ::v-deep {
            .ant-tabs-bar {
                margin: 0px;
            }
        }
    }

    &-content {
        width: 100%;
        height: calc(100vh - 40px - 56px - 72px);
        display: flex;
        padding: 12px;

        &-left {
            width: 100%;


            &-title {
                font-size: 22px;
                height: 40px;
                color: #000000;
                font-weight: 560;
                text-align: center;
            }

            &-subTitle {
                font-size: 18px;
                text-indent: 2em;
                height: 60px;
            }
        }

        &-right {
            width: 100%;

            &-title {
                height: 40px;
                width: 100%;
                text-align: center;
                color: #000000;
                font-weight: 560;
                font-size: 22px;
            }

            &-echart {
                height: calc(100% - 40px);
            }
        }
    }

    .title {
        font-size: 22px;
        height: 40px;
        color: #000000;
        font-weight: 560;
        text-align: center;
        margin-top: 12px;
    }

    &-contentBar {
        width: 100%;
        height: calc(100vh - 40px - 56px - 72px - 40px - 12px);
        display: flex;
    }
}
</style>